import React, { useEffect, useState } from "react";

const Timmer = () => {
  const [nowTime, setNowTime] = useState(
    new Date().toLocaleDateString() + new Date().toLocaleTimeString()
  );
  useEffect(() => {
    const timer = setInterval(() => {
      console.log("时间更新");
      setNowTime(
        new Date().toLocaleDateString() + new Date().toLocaleTimeString()
      );
    }, 1000);
    // 第二个参数可以传入一个函数，可以类比will unmount
    return () => {
      clearInterval(timer);
    };
  }, []);
  return <div>{nowTime}</div>;
};

const App = () => {
  const [name, setName] = useState("xiaoming");
  const [showTime, setShowTime] = useState(true);
  // 如果不传入依赖项，则会在每一次重新渲染的时候执行
  // 当依赖项传入空数组的时候，可以近似的认为它是did mount
  // 在传入依赖项的时候，可以监听数据的变化，去执行一些副作用
  useEffect(() => {
    setName(name.substring(0, 1).toUpperCase() + name.substring(1));
  }, [name]);
  // 可以写多个钩子函数
  useEffect(() => {
    console.log(showTime);
  }, [showTime]);
  return (
    <div>
      <div>{name}</div>
      <button onClick={() => setName("xiaozheng")}>改变名称</button>
      {showTime && <Timmer />}
      <button onClick={() => setShowTime(!showTime)}>修改时间显示隐藏</button>
    </div>
  );
};

export default App;
